Conditions | 11 |
Total Lines | 111 |
Code Lines | 88 |
Lines | 0 |
Ratio | 0 % |
Changes | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like HistoryMap.tsx ➔ HistoryMap often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
1 | import { useState, useEffect } from 'react'; |
||
11 | |||
12 | |||
13 | export default function HistoryMap({navigation, journey, modalVisible, setModalVisible}): any { |
||
14 | const [startCoordinates, setStartCoordinates] = useState([]); |
||
15 | const [endCoordinates, setEndCoordinates] = useState([]); |
||
16 | const [journeyData, setJourneyData] = useState([]); |
||
17 | const [startStop, setStartStop] = useState([]); |
||
18 | // console.log(journey); |
||
19 | |||
20 | useEffect(() => { |
||
21 | function setCoordinates() { |
||
22 | if (modalVisible) { |
||
23 | setStartCoordinates(journey['startPosition']); |
||
24 | setEndCoordinates(journey['endPosition']); |
||
25 | setJourneyData(journey); |
||
26 | console.log(startCoordinates); |
||
27 | |||
28 | console.log(endCoordinates); |
||
29 | |||
30 | } |
||
31 | |||
32 | }; |
||
33 | |||
34 | setCoordinates(); |
||
35 | }) |
||
36 | |||
37 | return ( |
||
38 | <Modal |
||
39 | animationType="slide" |
||
40 | transparent={true} |
||
41 | visible={modalVisible} |
||
42 | onRequestClose={() => { |
||
43 | setModalVisible(!modalVisible) |
||
44 | }} |
||
45 | > |
||
46 | <View style={styles.container}> |
||
47 | |||
48 | <MapView |
||
49 | style={styles.map} |
||
50 | region={{ |
||
51 | latitude: startCoordinates['latitude']? startCoordinates['latitude'] : 0, |
||
52 | longitude: startCoordinates['longitude']? startCoordinates['longitude'] : 0, |
||
53 | latitudeDelta: 0.05, |
||
54 | longitudeDelta: 0.05, |
||
55 | }} |
||
56 | userInterfaceStyle={'dark'} |
||
57 | > |
||
58 | |||
59 | {startCoordinates ? |
||
60 | <Marker |
||
61 | coordinate={{latitude: startCoordinates['latitude']? startCoordinates['latitude'] : 0, |
||
62 | longitude: startCoordinates['longitude']? startCoordinates['longitude'] : 0 |
||
63 | }} |
||
64 | /> |
||
65 | : |
||
66 | <View></View> |
||
67 | } |
||
68 | |||
69 | {endCoordinates ? |
||
70 | <Marker |
||
71 | coordinate={{latitude: endCoordinates['latitude']? endCoordinates['latitude'] : 0, |
||
72 | longitude: endCoordinates['longitude']? endCoordinates['longitude'] : 0 |
||
73 | }} |
||
74 | /> |
||
75 | : |
||
76 | <View></View> |
||
77 | } |
||
78 | |||
79 | |||
80 | |||
81 | |||
82 | |||
83 | |||
84 | </MapView> |
||
85 | |||
86 | <View style={styles.infoContainer}> |
||
87 | <Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => setModalVisible(false)}> |
||
88 | <Icon |
||
89 | name='arrow-left' |
||
90 | size={25} |
||
91 | color='black' |
||
92 | /> |
||
93 | </Pressable> |
||
94 | <View style={styles.info}> |
||
95 | |||
96 | <View style={styles.listInfo}> |
||
97 | <Text style={styles.infoTitle}>Journey started</Text> |
||
98 | <Text>{journeyData['date']}</Text> |
||
99 | </View> |
||
100 | |||
101 | <View style={styles.listInfo}> |
||
102 | <Text style={styles.infoTitle}>Information about the trip</Text> |
||
103 | <Text>{mapModel.calcDistance(startCoordinates[0], startCoordinates[1], endCoordinates[0], endCoordinates[1])} km / {journeyData['totalMin']} min </Text> |
||
104 | |||
105 | <Text> {journeyData['totalPrice']} kr</Text> |
||
106 | </View> |
||
107 | |||
108 | <View style={styles.listInfo}> |
||
109 | <Text style={styles.infoTitle}>ID</Text> |
||
110 | <Text>{journeyData['_id']}</Text> |
||
111 | </View> |
||
112 | |||
113 | <View style={styles.listInfo}> |
||
114 | <Text style={styles.infoTitle}>Vehicle</Text> |
||
115 | <Text>{journeyData['scooterName']}</Text> |
||
116 | </View> |
||
117 | |||
118 | </View> |
||
119 | </View> |
||
120 | </View> |
||
121 | </Modal> |
||
122 | |||
194 |